
<template>
<div>
	<div>
<!--	<div>造数详情页</div>-->
<!--		详情页样式预期规划：-->
<!--		<div>1、实现根据 配置项 自动渲染</div>-->
<!--		<div>2、实现响应的展示&#45;&#45;json需格式化</div>-->
<!--		<div>3、实现造数的执行</div>-->
<!--	<br><br>-->
<!--		配置页样式预期规划：-->
<!--		<div>1、url相关&#45;&#45;见 Api测试的 url 样式</div>-->
<!--		<div>2、参数相关&#45;&#45;见 UI测试-编辑-添加元素 样式</div>-->

	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>场景名:</span>
				<span>负责人:</span>
			</div>
		</template>

		<!-- 外层容器，设置左右边距为 20%，宽度为 60% -->
		<div class="container">
			<!-- 使用 el-form 包裹，方便管理表单布局 -->
			<el-form :model="form" label-width="100px">
				<!-- 遍历数据 -->
				<el-row v-for="(row, rowIndex) in chunkedData" :key="rowIndex" :gutter="20">
					<el-col
						v-for="(item, colIndex) in row"
						:key="colIndex"
						:span="12"
					>
					<el-form-item :label="item.key_name">
						<!-- 根据 input_type 渲染不同的输入组件 -->
						<template v-if="item.input_type === 'select'">
							<el-select
								v-model="item.value"
								:placeholder="`请选择${item.key_name}`"
								style="width: 100%"
							>
								<el-option
									v-for="opt in getOptions(item.key_name)"
									:key="opt.value"
									:label="opt.label"
									:value="opt.value"
								/>
							</el-select>
						</template>
						<template v-else-if="item.input_type === 'num'">
							<el-input
								v-model="item.value"
								type="number"
								:placeholder="`请输入${item.key_name}`"
								style="width: 100%"
							/>
						</template>
						<template v-else>
							<el-input
								v-model="item.value"
								:placeholder="`请输入${item.key_name}`"
								style="width: 100%"
							/>
						</template>
<!--						这里的目的是为了给各输框增加一个间隙-->
						<div style="padding: 10px"></div>
						<!-- 显示备注 -->
<!--						<div class="remarks">{{ item.remarks }}</div>-->
					</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</el-card>
</div>

	<!--	底部按钮-->
	<div>
		<el-row  class="btn-card">
			<el-col :span="24"><div class="grid-content ep-bg-purple-dark" />
				<div class="grid-content ep-bg-purple-dark">
					<el-button size="small" type="primary" @click="saveConfig()" class="title-button">提交
					</el-button>
				</div>
			</el-col>
		</el-row>
	</div>

	<el-card class="result-card">

		<template #header>结果展示</template>
		<!--json格式化工具,后续需优化成 点击提交按钮后，渲染结果-->
		<vue-json-pretty
			:data = "serverData"
			:deep="2"
			:highlightMouseoverNode="true"
		></vue-json-pretty>
	</el-card>

</div>
</template>

<script setup>

import { computed, ref } from 'vue';
import { ElButton } from 'element-plus';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';


// 模拟服务端下发的数据
const serverData = ref([
	{ key_name: 'age', key_type: 'num', input_type: 'select', remarks: 'xaxa', value: '' },
	{ key_name: 'name', key_type: 'text', input_type: 'text', remarks: '请输入姓名', value: '' },
	{ key_name: 'gender', key_type: 'text', input_type: 'select', remarks: '请选择性别', value: '' },
	{ key_name: 'height', key_type: 'num', input_type: 'num', remarks: '请输入身高', value: '' },
	{ key_name: 'height', key_type: 'num', input_type: 'num', remarks: '请输入身高', value: '' },
]);
const form = ref({})
// 将数据按每行 2 列分组
const chunkedData = computed(() => {
	const chunkSize = 2;
	const result = [];
	for (let i = 0; i < serverData.value.length; i += chunkSize) {
		result.push(serverData.value.slice(i, i + chunkSize));
	}
	return result;
});

// 根据 key_name 返回选择框的选项
const getOptions = (keyName) => {
	if (keyName === 'age') {
		return [
			{ label: '18', value: 18 },
			{ label: '20', value: 20 },
			{ label: '22', value: 22 },
		];
	} else if (keyName === 'gender') {
		return [
			{ label: '男', value: 'male' },
			{ label: '女', value: 'female' },
		];
	}
	return [];
};
</script>


<style scoped lang="scss">

.box-card{
	margin: 20px 20px;
}
.btn-card{
	margin-left: 20px;
	margin-right: 20px;
}
.result-card{
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}
/* 外层容器样式 */
.container {
	margin-left: 20%; /* 左边距 20% */
	margin-right: 20%; /* 右边距 20% */
	width: 60%; /* 宽度 60% */
}

/* 调整 el-form-item 的布局 */
.el-form-item {
	margin-bottom: 20px;
}

/* 备注样式 */
.remarks {
	font-size: 12px;
	color: #999;
	margin-top: 5px;
}
</style>